import _Button from "antd/lib/button";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  .config-item-wrapper {\n    padding: 16px;\n  }\n  .item-outer-wrapper .config-item-wrapper .check-icon {\n    transform: scale(1);\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

import React, { useContext, useState } from "react";
import styled from "styled-components";
import Spin from "antd/lib/spin";
import intl from "cpaas-front/lib/utils/intl";
import { defaultConfig } from "../../utils/config";
import { pageEvents } from "../../utils/event";
import { AvatarItem, ColorItemWrapper, IndexSubTitle, IndexTitle, IndexTop, OverviewContent // OverviewIcons,
, OverviewImg, OverviewItem, OverviewTitle, PageContainer, PictureItem, TopDescription, OverviewRow } from "../index.style";
import { Header, Content } from "../../components/Page";
import ConfigItem from "../_components/ConfigItem";
import overviewBlue from "../../assets/images/overview-blue.png";
import overviewBlack from "../../assets/images/overview-black.png";
import ThemeContext from "../../utils/ThemeContext";
import IconDisplay from "../_components/IconDisplay";
import { _getAsset } from "../../utils/utils";
import { themeDescription, showConfig, colorsMap } from "../../utils/constants";
import useThemeHelper from "../../components/Container/useThemeHelper";
var StyledConfigItem = styled(ConfigItem)(_templateObject()); // 用于当前模式配置

var schemaMap = ["theme1", "theme2"];
var reverseMap = {
  theme1: 0,
  theme2: 1
};

var ConfigIndex = function ConfigIndex() {
  var _useContext = useContext(ThemeContext),
      setTheme = _useContext.setTheme,
      config = _useContext.config,
      schemaStr = _useContext.schema;

  var schema = reverseMap[schemaStr];

  var _useState = useState(false),
      _useState2 = _slicedToArray(_useState, 2),
      loading = _useState2[0],
      setLoading = _useState2[1];

  var normalPicture = [{
    title: "欢迎插画",
    src: _getAsset("welcome")
  }, {
    title: "提示插画",
    src: _getAsset("remind")
  }, {
    title: "引导插画1",
    src: _getAsset("guide1")
  }, {
    title: "引导插画2",
    src: _getAsset("guide2")
  }, {
    title: "引导插画3",
    src: _getAsset("guide3")
  }, {
    title: "引导插画4",
    src: _getAsset("guide4")
  }];
  var exceptionPicture = [{
    title: "无网络连接",
    src: _getAsset("noNetwork")
  }, {
    title: "无搜索内容",
    src: _getAsset("noSearch")
  }, {
    title: "无系统消息",
    src: _getAsset("noSysMessage")
  }, {
    title: "无报告",
    src: _getAsset("noReport")
  }];
  var genderAvatar = [{
    title: "默认女性",
    src: _getAsset("female")
  }, {
    title: "默认男性",
    src: _getAsset("male")
  }];
  var defaultAvatar = [{
    title: "默认头像1",
    src: _getAsset("nameAvatar1")
  }, {
    title: "默认头像2",
    src: _getAsset("nameAvatar2")
  }, {
    title: "默认头像3",
    src: _getAsset("nameAvatar3")
  }, {
    title: "默认头像4",
    src: _getAsset("nameAvatar4")
  }];

  var handleChange = function handleChange(index) {
    var _useThemeHelper = useThemeHelper(),
        readOriginLocalTheme = _useThemeHelper.readOriginLocalTheme,
        setLocalTheme = _useThemeHelper.setLocalTheme;

    var localTheme = readOriginLocalTheme();
    var schemaCurrent = (localTheme[schemaMap[index]] || {}).current;
    setLoading(true);
    var conf = {
      current: _objectSpread({}, schemaCurrent || defaultConfig, {
        schema: schemaMap[index]
      }),
      prev: {}
    };
    setLocalTheme(conf);
    setTheme(conf);
    setTimeout(function () {
      setLoading(false);
    }, 1500);
  };

  var handleNextStepClick = function handleNextStepClick() {
    pageEvents.emit("push", "theme-config/components", {});
  };

  var colorsObj = colorsMap.get(schemaStr) || {
    primary: [],
    secondary: []
  };
  return React.createElement(PageContainer, null, React.createElement(Header, {
    title: intl.get("cpaas.cpaasTheme.page.configCenter").d("配置中心"),
    hideBackBtn: true
  }), React.createElement(Content, null, React.createElement(Spin, {
    spinning: loading,
    size: loading ? "large" : "small"
  }, React.createElement(IndexTop, null, React.createElement(IndexTitle, null, intl.get("cpaas.cpaasTheme.page.globalConfig").d("全局配置")), React.createElement(IndexSubTitle, null, intl.get("cpaas-cpaasTheme.page.globalConfigDesc").d("此项配置包含外观、布局等全局配置")), React.createElement(StyledConfigItem, {
    simple: true,
    defaultSelected: schema,
    style: {
      paddingLeft: 8
    },
    onChange: handleChange,
    items: [{
      render: React.createElement(OverviewImg, {
        src: overviewBlue
      })
    }, {
      render: React.createElement(OverviewImg, {
        src: overviewBlack
      })
    }]
  }), React.createElement(TopDescription, null, themeDescription[schemaStr].desc, themeDescription[schemaStr].configurable && "如需修改组件样式，请点击", themeDescription[schemaStr].configurable && React.createElement("a", {
    style: {
      color: "#4588f4"
    },
    onClick: handleNextStepClick
  }, intl.get("cpaas.cpaasTheme.page.nextStep").d("下一步"))), showConfig[config.current.schema].showNextStep && React.createElement(_Button, {
    onClick: handleNextStepClick,
    type: "primary",
    style: {
      marginTop: 12
    }
  }, intl.get("cpaas.cpaasTheme.page.nextStepConfigComponent").d("下一步，配置组件")), showConfig[config.current.schema].showIcons && React.createElement(OverviewItem, {
    style: {
      paddingRight: 16
    }
  }, React.createElement(OverviewTitle, null, intl.get("cpaas.cpaasTheme.page.supportIcons").d("支持图标")), React.createElement(IconDisplay, null)), showConfig[config.current.schema].showColors && React.createElement(OverviewItem, null, React.createElement(OverviewTitle, null, "\u8272\u5F69\u65B9\u6848 Color"), React.createElement(OverviewContent, {
    style: {
      paddingTop: 0,
      paddingBottom: 0
    }
  }, React.createElement(OverviewRow, null, colorsObj.primary.map(function (c) {
    return React.createElement(ColorItemWrapper, {
      key: c
    }, React.createElement("div", {
      className: "color-item",
      style: {
        backgroundColor: c
      }
    }), React.createElement("p", {
      className: "desc",
      style: {
        paddingBottom: 54
      }
    }, React.createElement("span", null, intl.get("cpaas.cpaasTheme.page.primaryColor").d("主要颜色"))));
  })), React.createElement(OverviewRow, {
    style: {
      paddingTop: 0
    }
  }, colorsObj.secondary.map(function (color) {
    return React.createElement(ColorItemWrapper, {
      key: color
    }, React.createElement("div", {
      className: "color-item",
      style: {
        backgroundColor: color
      }
    }), React.createElement("p", {
      className: "desc"
    }, intl.get("cpaas.cpaasTheme.page.secondaryColor").d("次要颜色")));
  })))), showConfig[config.current.schema].showInsets && React.createElement(OverviewItem, null, React.createElement(OverviewTitle, null, "\u7F3A\u7701\u9875&\u63D2\u753B Default"), React.createElement(OverviewContent, null, React.createElement(OverviewRow, null, normalPicture.map(function (item) {
    return item.src ? React.createElement(PictureItem, {
      key: item.title
    }, React.createElement("div", {
      className: "img-wrapper"
    }, React.createElement("img", {
      src: item.src,
      alt: item.title
    })), React.createElement("p", {
      className: "title"
    }, item.title)) : null;
  })), React.createElement(OverviewRow, null, exceptionPicture.map(function (item) {
    return item.src ? React.createElement(PictureItem, {
      key: item.title
    }, React.createElement("div", {
      className: "img-wrapper"
    }, React.createElement("img", {
      src: item.src,
      alt: item.title
    })), React.createElement("p", {
      className: "title"
    }, item.title)) : null;
  })))), showConfig[config.current.schema].showAvatar && React.createElement(OverviewItem, null, React.createElement(OverviewTitle, null, "\u5934\u50CF Avatar"), React.createElement(OverviewContent, {
    style: {
      paddingLeft: 26
    }
  }, React.createElement(OverviewRow, null, genderAvatar.map(function (item) {
    return React.createElement(AvatarItem, {
      key: item.title
    }, React.createElement("div", {
      className: "img-wrapper"
    }, React.createElement("img", {
      src: item.src,
      alt: item.title,
      className: "avatar-img"
    })), React.createElement("p", {
      className: "title"
    }, item.title));
  })), React.createElement(OverviewRow, null, defaultAvatar.map(function (item) {
    return React.createElement(AvatarItem, {
      key: item.title
    }, React.createElement("div", {
      className: "img-wrapper"
    }, React.createElement("img", {
      src: item.src,
      alt: item.title,
      className: "avatar-img"
    })), React.createElement("p", {
      className: "title"
    }, item.title));
  }))))))));
};

export default ConfigIndex;
